<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="我是一个web全栈工程师，热爱各种web有关的互联技术，无论前端、还是后端。这个网站中，我总结了部分学习和工作的经验，分享出来与大家分享交流。">
    <meta name="keyword"  content="章宵,michael,听风,web前端,web后端,持续集成,Spring Boot,Spring Cloud,Vue,Angular,Docker,Python,Node">
    <!-- <link rel="shortcut icon" href="/img/favicon.ico"> -->
    
    <title>WebSocket笔记(一) 初步认识 - 听风.Michael</title>
    
    <!--百度统计-->
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?d0c0457f89e68e1f8accd218fb7338ea";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <!-- Bootstrap Core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <!--highlight-->
    <link rel="stylesheet" href="/css/highlight.github.css">
    <!-- Custom Fonts -->
    <script src="//at.alicdn.com/t/font_702425_w2w4nyr7wxywrk9.js"></script>
    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/zx-blog.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- ga & ba script hoook -->
    <script></script>
</head>


<!-- hack iOS CSS :active style -->
<body ontouchstart="">

    <nav id="navbar-zx" class="navbar navbar-expand-lg fixed-top">
  
  <a class="navbar-brand" href="/">听风.Michael</a>
  
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav justify-content-end ml-auto">
      
      
      <li class="nav-item">
        <a class="nav-link" href="/">首页 / Home</a>
      </li>
      
      <li class="nav-item">
        <a class="nav-link" href="/archive">归档 / Archive</a>
      </li>
      
      <li class="nav-item">
        <a class="nav-link" href="/about">关于 / About</a>
      </li>
      
    </ul>
  </div>
</nav>

    <!-- Page Header -->

<style>
header.intro-header{
    position: relative;
    
    background-image:url('/img/header-5.jpg')
}
header.intro-header .header-mask{
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0,0,0, 0.2);
}
</style>
<header class="intro-header">
  <div class="header-mask"></div>
  <div class="container">
      <div class="row">
        
        <div class="col-lg-10 offset-lg-1 col-md-10 offset-md-1">
            <div class="post-heading">
                <div class="tags">
                    
                        <a class="tag" href="/tags/后端" title="后端">后端</a>
                    
                        <a class="tag" href="/tags/WebSocket" title="WebSocket">WebSocket</a>
                    
                </div>
                <h1 class="display-1" data-toc-skip>WebSocket笔记(一) 初步认识</h1>
                <h2 class="subTitle" data-toc-skip></h2>
                <span class="meta">
                    Posted by Michael on
                    2018-06-15
                </span>
            </div>
        </div>
        
      </div>
  </div>
</header>


<!-- Main Content -->
<div class="container">
    
<!-- Post Content -->
<div class="row mt-4">
    <div class="
                col-lg-8 offset-lg-1
                col-md-12
                col-sm-12
                col-xs-12
                post-list-container
            ">
        <article class="post-context">
            
            <h1 id="使用场景"><a href="#使用场景" class="headerlink" title="使用场景"></a>使用场景</h1><ul>
<li>服务器，需要向客户端主动端推送消息（数据）</li>
<li>客户端，需要实施获取服务器上数据更新或变化</li>
</ul>
<h1 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h1><p>WebSocket是一种能在<code>单个TCP连接</code>上进行<code>全双工通讯</code>的协议。</p>
<h1 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h1><h3 id="较少的控制开销"><a href="#较少的控制开销" class="headerlink" title="较少的控制开销"></a>较少的控制开销</h3><p>在连接创建<code>后</code>，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。在不包含扩展的情况下，对于服务器到客户端的内容，此头部大小只有2至10字节（和数据包长度有关）；对于客户端到服务器的内容，此头部还需要加上额外的4字节的掩码。<code>相对于HTTP请求每次都要携带完整的头部</code>，此项开销显著减少了。</p>
<h3 id="更强的实时性"><a href="#更强的实时性" class="headerlink" title="更强的实时性"></a>更强的实时性</h3><p>由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少；即使是和Comet等类似的长轮询比较，其也能在短时间内更多次地传递数据。</p>
<h3 id="保持连接状态"><a href="#保持连接状态" class="headerlink" title="保持连接状态"></a>保持连接状态</h3><p>与HTTP不同的是，Websocket需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息（如身份认证等）。</p>
<h3 id="更好的二进制支持"><a href="#更好的二进制支持" class="headerlink" title="更好的二进制支持"></a>更好的二进制支持</h3><p>Websocket定义了二进制帧，相对HTTP，可以更轻松地处理二进制内容。</p>
<h3 id="可以支持扩展"><a href="#可以支持扩展" class="headerlink" title="可以支持扩展"></a>可以支持扩展</h3><p>Websocket定义了扩展，用户可以扩展协议、实现部分自定义的子协议。如部分浏览器支持压缩等。</p>
<h3 id="更好的压缩效果"><a href="#更好的压缩效果" class="headerlink" title="更好的压缩效果"></a>更好的压缩效果</h3><p>相对于HTTP压缩，Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。</p>
<h3 id="没有跨域问题"><a href="#没有跨域问题" class="headerlink" title="没有跨域问题"></a>没有跨域问题</h3><p>不同于HTTP，WebSocket并没有同源限制，客户端可以与任意服务器通信</p>
<h3 id="与-HTTP-协议有着良好的兼容性"><a href="#与-HTTP-协议有着良好的兼容性" class="headerlink" title="与 HTTP 协议有着良好的兼容性"></a>与 HTTP 协议有着良好的兼容性</h3><p>默认端口同HTTP/HTTPs，也是<code>80</code>和<code>443</code></p>
<p>握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。</p>
<table>
<thead>
<tr>
<th>对比</th>
<th>HTTP</th>
<th>WebSocket</th>
</tr>
</thead>
<tbody>
<tr>
<td>协议标识</td>
<td>http/https</td>
<td>ws/wss</td>
</tr>
<tr>
<td>端口</td>
<td>80/443</td>
<td>80/443</td>
</tr>
</tbody>
</table>
<p>普通80端口：<code>ws://example.com:80/some/path</code><br>加密443端口：<code>wss://example.com:80/some/path</code></p>
<h3 id="服务器端容易实现"><a href="#服务器端容易实现" class="headerlink" title="服务器端容易实现"></a>服务器端容易实现</h3><p>Java/Python/Node/Php/.NET，好像都是支持的（表示心虚，我只是百度了一圈，都能找到现成解决方案）</p>
<h1 id="参考文章"><a href="#参考文章" class="headerlink" title="参考文章"></a>参考文章</h1><blockquote>
<p><a href="HTTPs://en.wikipedia.org/wiki/WebSocket" target="_blank" rel="noopener">维基百科 WebSocket</a><br><a href="HTTP://www.ruanyifeng.com/blog/2017/05/websocket.html" target="_blank" rel="noopener">WebSocket 教程(阮一峰)</a><br><a href="HTTPs://segmentfault.com/a/1190000006265489" target="_blank" rel="noopener">WebSocket资料总结</a><br><a href="HTTP://chenkangxian.iteye.com/blog/2268133" target="_blank" rel="noopener">websocket与comet的性能对比</a><br><a href="HTTPs://segmentfault.com/a/1190000011589144" target="_blank" rel="noopener">浅谈HTTP长连接</a><br><a href="HTTPs://blog.csdn.net/myphp2012/article/details/78437462" target="_blank" rel="noopener">WEB通讯技术之短轮询、长轮询(comet)、长连接(SSE)、WebSocket</a></p>
</blockquote>

        </article>
        <div>
            <!-- 来必力City版安装代码 -->
            <div id="lv-container" data-id="city" data-uid="MTAyMC8zNzI2NS8xMzc5OQ==">
                <script type="text/javascript">
                    (function(d, s) {
                        var j, e = d.getElementsByTagName(s)[0];

                        if (typeof LivereTower === 'function') { return; }

                        j = d.createElement(s);
                        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
                        j.async = true;

                        e.parentNode.insertBefore(j, e);
                    })(document, 'script');
                </script>
                <noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
            </div>
            <!-- City版安装代码已完成 -->
        </div>
    </div>
    <aside class="col-lg-3 pr-4 .d-none .d-lg-block .d-xl-none side-bar">
        <nav id="post-toc" class="sticky-top"></nav>
    </aside>
</div>


</div>


    <!-- Footer -->
    <footer>
  <div class="container">
    <div class="copyright text-muted text-center">
    Copyright &copy; 听风.Michael 2019 
    </div>
  </div>
</footer>

<!-- jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- highlight -->
<script src="/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="/js/bootstrap-toc.js"></script>
<script src="/js/zx-blog.js"></script>
</body>
</html>
